﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>物理监控</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/pm.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/data5.js"></script>
		<script type="text/javascript" src="../js/canvas4.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}

		.box-img{
			z-index: 1000;
		}

	</style>
	<script>
        window.onload = function() {
            var canvasData = {x:320 , y:52, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-152)};
            init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4);//初始化
            addList();
            drawCircles();
        };
        function lineEvent1(){}
        function lineEvent2(){}
        function lineEvent3(){}
        function  iconEvent4(obj){
            alert("机箱");
            alert(JSON.stringify(obj));

        }
        /**加载数据*/
        function addList(){
            /*var url="all";
            var circlesData=[];
            params={};
            $.post(url,params,"JSON").done(function(data){
                if(data){
                    circlesData=data;
                }
            });
            */
            if(circlesData==null){
                return false;
            }
            for(var i=0;i<circlesData[0].data.length;i++){
                addCanvasLevel1(i+1,circlesData[0].data[i]);
                for(var j=0;j<circlesData[0].data[i].boards.length;j++){
                    addCanvasLevel2(i ,j, circlesData[0].data[i].boards[j]);
                    for(var k=0;k<circlesData[0].data[i].boards[j].cpus.length;k++){
                        addCanvasLevel3(i ,j , k,circlesData[0].data[i].boards[j].cpus[k]);
                    }
                }
            }

        }

	</script>
	</head>
	<body>
	<div class="rightKey shadow">
		<div class="rk1" onclick="viewA();">查看A类信息</div>
		<div class="rk2" onclick="viewB();">查看B类信息</div>
		<div class="rk3" onclick="viewC();">查看C类信息</div>
		<div class="rk4" onclick="viewD();">查看D类信息</div>
	</div>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu"><a href="../html/tfLibrary.html" >拓扑文件库</a></div>
			<div class="left_menu"><a href="../html/lapLibrary.html">逻辑预案库</a></div>
			<div class="left_menu"><a href="../html/bsk.html">部署库</a></div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curId" name="curId">
				<!-- 头部 -->
				<div class="top-bar">
					<div style="float:left;">物理监控<br>
						<span  class="text_color"  style="font-size: 13px;">Physical&nbsp;moniting</span>
					</div>
					<div class="excuCMD">
						<button type="button" onclick="open_pop();">全局搜索</button>
						<button type="button" onclick="open_pop3();">控制台</button>
					</div>
					<div class="b1">1.10以内<img src="../images/monitors/1.1.png"></div>
					<div class="b2">2.1000以内<img src="../images/monitors/2.1.png"></div>
					<div class="b3">3.10000以内<img src="../images/monitors/3.1.png"></div>
					<div class="b4">4.100000以内<img src="../images/monitors/4.1.png"></div>
					<div class="b5">5.1000000以内<img src="../images/monitors/5.1.png"></div>
				</div>
				<!-- 右侧 -->
				<div class="right pop-right">
						<div class="r0 app_text">属性栏</div>

						<div  class="lu expand" style="cursor:pointer;">
							物理链路
						</div>

						<div  class="attrA expand" style="cursor:pointer;">
							物理端口A属性
						</div>

						<div  class="attrB expand" style="cursor:pointer;">
							物理端口B属性
						</div>

						<div  class="infoA expand" style="cursor:pointer;">
							物理端口A统计信息
						</div>

						<div  class="infoB expand" style="cursor:pointer;">
							物理端口B统计信息
						</div>
					</div>
				<!-- 左侧 -->
				<div class="table-box">
					
					
				</div>
			</form>
	</div>
	<!--查询弹窗-->
	<div class="pop_content" id="showInfo" style="display:none;">
		<div class="pop_block">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">搜索</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
			<div class="pop_input">
				<button class="searchAll" type="button">搜索</button>
				<input class="s_input" id="condition" type="text" name="" placeholder="输入编号或名称搜索"/>
				<button class="s_right" onclick="reset()" type="button">重置</button>
			</div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tr>
						<td><div>序号</div></td>
						<td><div>APP名称</div></td>
						<td><div>类型</div></td>
						<td><div>状态</div></td>
						<td><div>备注</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tbody class="popTbody"></tbody>
				</table>
			</div>
		</div>
	</div>
	<!--CMD弹窗-->
	<div class="pop_content3" id="showInfo3" style="display:none;">
		<div class="pop_block3">
			<div class="pop_barInfo" >
				<div style="font-size: 14px;color:#434C53">控制台</div>
				<div style="font-size: 12px;color:#989898">The&nbsp;console</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop3();"></div>
			<div class="contentText">
				<textarea class="contentTextTextArea"></textarea>
			</div>
			<div class="pop_excute">
				<button class="excute" type="button">立即执行</button>
				<input class="ex_input" id="condition" type="text" name="" placeholder="输入命令"/>
				<button class="ex_reset" type="button" onclick="popHide()">隐藏</button>
			</div>
		</div>
	</div>
	<!--物理路由表弹窗-->
	<div class="pop_content2" id="showInfo2" style="display:none;">
		<div class="pop_block2">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">物理路由表信息查看</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tr>
						<td><div>设备ID</div></td>
						<td><div>目标ID</div></td>
						<td><div>入端口ID</div></td>
						<td><div>出端口ID</div></td>
						<td><div>出端口ID</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tbody class="popTbody2">
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
							<td>5</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	</body>

	<script type="text/javascript">

       $(document).bind('contextmenu',function(){
            return false;
        });
        /*右键*/
        $(document).on("mousedown",".box-img",function(e){
			var type= e.which;
			if(type==3){
                var x = e.clientX;
                var y = e.clientY;
                $(".rightKey").css({left:x+"px",top:y+"px"});
			    $(".rightKey").show();
				e.stopPropagation();
				return  false;
            }

        });

        $("body").click("mousedown",function(e){
            $(".rightKey").hide();
		});
        function viewA(){
            $(".rightKey").hide();
			open_pop2();
		}
		function viewB(){
            $(".rightKey").hide();
			open_pop2();
        }
		function viewC(){
            $(".rightKey").hide();
     	    open_pop2();
        }
		function viewD(){
			$(".rightKey").hide();
			open_pop2();
        }

    /*右侧列表*/
    $(".lu.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>物理连路ID</td><td><div class="app_text">1</div></td></tr>';
            html+='<tr><td>链路主备</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>连路Down</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td>链路模式</td><td><div class="app_text">4x</div></td></tr>';
            html+='<tr><td>链路质量等级</td><td><div class="app_text">0</div></td></tr>';
            html+='</table>';
            html+='</div>';
            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".attrA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div  class="app_text">0</div></td></tr>';
            html+='<tr><td colspan="2"><div onclick="open_pop2()" style="cursor:pointer;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".attrB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td colspan="2"><div onclick="open_pop2()" style="cursor:pointer;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
   $(".infoA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
   $(".infoB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
	/*物理路由弹窗*/
	function addDataPop2(data){
		$(".contentTableDiv2 .popTbody2").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td>'+v.no+'</td>';
			html += '<td>'+v.name+'</td>';
			html += '<td>'+v.type+'</td>';
			html += '<td>'+v.state+'</td>';
			html += '<td>'+v.note+'</td>';
			html += '</tr>';
		});
		$(".contentTableDiv2 .popTbody2").append(html);
	}

	function open_pop2(){
		/* var url = 'deploy_topology/get_by_id';
		var param = {id:id};
		$.post(url,param,"JSON").done(function(data){
			if(data&&data.length>0){
				addDataPop(data)
			}
		}); */
		 var dataArr = [];
		for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.no = i;
			dataJson.name = "OX8E_"+i;
			dataJson.type="string";
			dataJson.state = i;
			dataJson.note = "string";
			dataArr.push(dataJson);
		}
		addDataPop2(dataArr);
		$("#showInfo2").show();
		tableSum();
	}
   /*CMD弹窗*/
   function open_pop3(){
	   $("#showInfo3").show();
   }
   function exit_pop3(){
	   $("#showInfo3").hide();
   }
   /*查询弹窗*/
   function open_pop(){
	   $("#showInfo").show();
	   $(".searchAll").on("click",function () {
		   alert("全局搜索");
		   /* var url = 'deploy_topology/get_by_id';
		  var param = {condition:$("#condition").val()};
		  $.post(url,param,"JSON").done(function(data){
			  if(data&&data.length>0){
				  addDataPop(data)
				   tableSum();
			  }
		  }); */
		   var dataArr = [];
		   for(i=1;i<=20;i++){
			   var dataJson = {};
			   dataJson.no = i;
			   dataJson.name = "OX8E_"+i;
			   dataJson.type="string";
			   dataJson.state = i;
			   dataJson.note = "string";
			   dataArr.push(dataJson);
		   }
		   addDataPop(dataArr);
		   tableSum();
	   });

   }
   function popHide(){
       $(".pop_excute").hide();
   }
   function reset(){
	   $("#condition").val("");
   }
   function addDataPop(data){
	   $(".contentTableDiv2 .popTbody").empty();
	   var html = '';
	   $.each(data,function(k,v){
		   html += '<tr>';
		   html += '<td>'+v.no+'</td>';
		   html += '<td>'+v.name+'</td>';
		   html += '<td>'+v.type+'</td>';
		   html += '<td>'+v.state+'</td>';
		   html += '<td>'+v.note+'</td>';
		   html += '</tr>';
	   });
	   $(".contentTableDiv2 .popTbody").append(html);
   }
   function exit_pop(){
	   $("#showInfo").hide();
   }
	function exit_pop2(){
		$("#showInfo2").hide();
	}
	function tableSum() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
	}
	$(function(){
		tableSum();
	});

	$(window).resize(function() {
		tableSum();
	});

	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
	</script>
</html>
